<template>
  <div class="container">
    <div class="hd">
      <h1 class="page_title">门诊缴费明细</h1>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div class="weui_cells weui_cells_access ft-sm" style="margin-top:10px;">
      <a v-for="cp in clinPayDetails" class="weui_cell" href="javascript:;">
        <div class="weui_cell_bd weui_cell_primary">
          <p>处方号：<span class="am-ft-sm am-ft-blue">{{cp.recipeId}}</span></p>
          <p>收费项目：<span class="am-ft-sm am-ft-blue">{{cp.feeName}}</span></p>
          <p>收费项目类型：<span class="am-ft-sm am-ft-blue">{{cp.feeType}}</span></p>
          <p>单位：<span class="am-ft-sm am-ft-blue">{{cp.unit}}</span></p>
          <p>规格：<span class="am-ft-sm am-ft-blue">{{cp.spec}}</span></p>
          <p>单价：<span class="am-ft-sm am-ft-blue">{{cp.price}}</span></p>
          <p>总量：<span class="am-ft-sm am-ft-blue">{{cp.qty}}</span></p>
          <p>总金额：<span class="am-ft-sm am-ft-blue">{{cp.totalAmt}}</span></p>
          <p>自费金额：<span class="am-ft-sm am-ft-blue">{{cp.selfAmt}}</span></p>
          <p>备注：<span class="am-ft-sm am-ft-blue">{{cp.remark}}</span></p>
        </div>
      </a>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.hd {
  padding: .5em 0;
}

.page_title {
  text-align: center;
  font-size: 20px;
  color: #B86086;
  font-weight: 400;
  margin: 0 5%;
}

.ft-sm p {
  padding: 3px;
  font-size: 12px;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'BillPayDetailView',
  data: function () {
    return {
      hosPayId: this.$route.query.hosPayId,
      clinPayDetails: [],
      showEmpty: false,
      emptyMsg: ''
    }
  },
  vuex: {
    getters: {
      card: ({ card }) => _.findWhere(card.cards, { isSelected: true })
    }
  },
  ready: function () {
    this.getBillPayDetail()
  },
  methods: {
    getBillPayDetail: function () {
      var self = this

      this.$ajax.get('GetBillPayDetail', 'Bill', {
        hosPayId: this.hosPayId
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
          self.clinPayDetails = []
        } else {
          self.clinPayDetails = _.map(data.ClinPayDetailInfos, function (val) {
            return {
              hosPayId: val.HosPayId,
              recipeId: val.RecipeId,
              feeName: val.FeeName,
              feeCode: val.FeeCode,
              unit: val.Unit,
              spec: val.Spec,
              price: val.Price,
              qty: val.Qty,
              totalAmt: val.TotalAmt,
              selfAmt: val.SelfAmt,
              feeType: val.FeeType,
              remark: val.Remark
            }
          })

          if (self.clinPayDetails.length <= 0) {
            self.showEmpty = true
            self.emptyMsg = '找不到缴费明细记录'
            self.clinPayDetails = []
          }
        }
      })
    }
  }
}
</script>
